Site editor: Update resize handle. #47138
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +271 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in bf7423d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3928779040
|
|
Chatted with @jameskoster and we ended on this:
I think that can work well for us, and its prominence being managed in this fashion would allow us to potentially also have explicit device buttons in the future, in case that's something we want. |
|
I pushed some updates based on the design above. The handle now occupies the entire 24px gap between navigation panel and frame, but is hidden until hovered. handle.mp4 |
|
That looks great to me. I'm hesitant to approve a PR I started myself, but might still do so since you essentially commandeered it so well, especially if no-one from @WordPress/gutenberg-design chimes in ;) Looks like there's a parentheses/space related linting error: https://github.com/WordPress/gutenberg/actions/runs/3913875739/jobs/6690288152 |
Should it also hide once it's no longer being interacted with? My natural follow-up is to click anywhere to get it to go away. |
|
I am testing Gutenberg 15.0RC where the PR by Riad is included. #46903 |
I think since it's focused, it should probably stay visible unless you focus out for a11y reasons. |
youknowriad
approved these changes
Jan 16, 2023
|
There's some listing issues to be fixed it seems |
|
Fixed the linting issue, I think.
Yes, just tested this, seems right. However the resizer doesn't appear to be keyboard manipulable at all, i.e. it's focusable, but I can't use keys to resize. This seems resizablebox specific and therefore separate, but it could be worth looking into. |
juanmaguitar
added
[Type] Enhancement
24 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Followup to #46903. Changes the resize handle to not act as a visual separator, and eliminates the double gutter.
Before:
After:
This is a draft because this solution isn't quite ideal either. The border is still there acting as a separator all the time, it gets partially covered by the viewport drop shadow, and it isn't centered in the gutter between the two elements. Ideally we could keep the gap value, that part was correct. But the double gutter needs a separate solution then. Would love input and ideas 🙏
Testing Instructions
Please test the resize handle between the left and right sides in the site editor (tab stop after the item in the menu) and it should work, without adding a double gutter.